<template>
  <div>
    <el-form ref="form" :model="form" label-width="120px">
      <el-form-item label="模组名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="模组标签">
        <el-select v-model="form.label" multiple placeholder="请选择" size="medium">
          <div v-for="item in labels">
            <el-tooltip class="item" effect="dark" :content="item.desc" placement="right">
              <el-option
                  :key="item.name"
                  :label="item.name"
                  :value="item.labelId">
              </el-option>
            </el-tooltip>
          </div>
        </el-select>
      </el-form-item>
      <el-form-item label="模组类型">
        <el-input v-model="form.type"></el-input>
      </el-form-item>
      <el-form-item label="规则类型">
        <el-input v-model="form.rule_type"></el-input>
      </el-form-item>
      <el-form-item label="模组适合人群">
        <el-input v-model="form.recommend_people"></el-input>
      </el-form-item>
      <el-form-item label="模组简介">
        <el-input type="textarea" v-model="form.descri" autosize="{ minRows: 5, maxRows: 10}"></el-input>
      </el-form-item>
    </el-form>
    <el-form inline="true" label-position='top' label-width="80px" class="demo-form-inline">
      <el-form-item label="最短时间">
        <el-input v-model="form.short_time"></el-input>
      </el-form-item>
      <el-form-item label="最长时间">
        <el-input v-model="form.long_time"></el-input>
      </el-form-item>
    </el-form>
    <el-form ref="form" :model="form" label-width="120px">
      <el-form-item label="背景时间">
        <el-input v-model="form.time_background"></el-input>
      </el-form-item>
      <el-form-item label="背景地点">
        <el-input v-model="form.place_background"></el-input>
      </el-form-item>
      <el-form-item label="上传文件(限一个)">
        <div title="上传" width="500px" style="padding:0;" @close="resetAdd">
          <div style="height:70px;margin-left:100px;margin-top:15px;">
            <input type="file" ref="clearFile" @change="getFile($event)" style="margin-left:70px;"
                   accept=".zip,.rar">
            <span>支持扩展名：.zip,.rar</span>
          </div>
        </div>
        <div>
          <div v-for="(item, index) in fileList" :key="index">
            <div>{{ item.name }}</div>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="上传图片(限一张)">
        <div title="上传" width="500px" style="padding:0;" @close="resetAdd">
          <div style="height:70px;margin-left:100px;margin-top:15px;">
            <input type="file" ref="clearFile" @change="getPic($event)" style="margin-left:70px;"
                   accept=".jpg,.png">
            <span>支持扩展名：.jpg,.png</span>
          </div>
        </div>
        <div>
          <div v-for="(item, index) in picList" :key="index">
            <div>{{ item.name }}</div>
          </div>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">上传模组</el-button>
        <el-button @click="resetAdd" type="danger">删除上传文件及图片</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Create",
  data() {
    return {
      form: {
        name: '',
        type: '',
        descri: '',
        label: [],
        uid: 0,
        short_time: '',
        long_time: '',
        rule_type: '',
        time_background: '',
        place_background: '',
        recommend_people: '',
        pic_path: '../assets/5.jpg',
        timePublish: '',
      },
      labels: [
        {
          name: '测试标签',
          desc: '这就是个测试标签',
          labelId: 1,
        },
        {
          name: '测试标签2',
          desc: '这就是个测试标签2',
          labelId: 2,
        },
        {
          name: '测试标签3',
          desc: '这就是个测试标签3',
          labelId: 3,
        },
        {
          name: '测试标签4',
          desc: '这就是个测试标签4',
          labelId: 4,
        }
      ],
      createForm: {
        title: "",
        content: "",
        img: "",
        user_id: "",
        type: "发布模组"
      },
      dialogVisible: false,
      dialogImageUrl: "",
      fileList: [],
      picList: [],
    }
  },
  methods: {
    getFile(event) {
      let file = event.target.files;
      console.log(file.length)
      for (let i = 0; i < file.length; i++) {
        //    上传类型判断
        let imgName = file[i].name;
        let idx = imgName.lastIndexOf(".");
        if (idx !== -1) {
          let ext = imgName.substr(idx + 1).toUpperCase();
          ext = ext.toLowerCase();
          if (ext !== 'zip' && ext !== 'rar') {
            this.$message.error("文件格式错误")
          } else {
            this.fileList.push(file[i]);
          }
        } else {

        }
      }
    },
    getPic(event) {
      let file = event.target.files;
      console.log(file.length)
      for (let i = 0; i < file.length; i++) {
        //    上传类型判断
        let imgName = file[i].name;
        let idx = imgName.lastIndexOf(".");
        if (idx !== -1) {
          let ext = imgName.substr(idx + 1).toUpperCase();
          ext = ext.toLowerCase();
          if (ext !== 'jpg' && ext !== 'png') {
            this.$message.error("文件格式错误")
          } else {
            if(ext === 'jpg'){
              // file[i].name =
            }
            this.picList.push(file[i]);
          }
        } else {

        }
      }
    },
    onSubmit() {
      // if (0 === this.fileList.length) {
      //   this.$message({
      //     type: 'info',
      //     message: '请选择要上传的文件'
      //   });
      //   return;
      // }
      console.log(this.form.label)

      //上传文件
      let formData = new FormData();
      console.log("files length" + this.fileList.length);
      for (let i = 0; i < this.fileList.length; i++) {
        formData.append('file', this.fileList[i]);
      }
      //上传图片
      // let formDataPic = new FormData();
      console.log("files length" + this.picList.length);
      for (let i = 0; i < this.picList.length; i++) {
        formData.append('pic', this.picList[i]);
      }

      formData.append("name",this.form.name)
      formData.append("type",this.form.type)
      formData.append("descri",this.form.descri)
      formData.append("uid",this.form.uid)
      formData.append("short_time",this.form.short_time)
      formData.append("label",this.form.label)
      formData.append("long_time",this.form.long_time)
      formData.append("rule_type",this.form.rule_type)
      formData.append("time_background",this.form.time_background)
      formData.append("place_background",this.form.place_background)
      formData.append("recommend_people",this.form.recommend_people)
      formData.append("pic_path",this.form.pic_path)
      formData.append("timePublish",this.form.timePublish)

      // this.form.pic=formDataPic;
      // this.form.file=formData;
      // let upload_file=this.form;

      // let data_form=new FormData();
      // data_form.append('pic', this.picList[0]);
      // data_form.append('file', this.fileList[0]);

      axios.post(
        axios.defaults.baseURL + 'module/upload',
          formData
      ).then((res) => {
        if(res.code==="000000"){
          this.$message.success("上传成功");
        }else{
          this.$message.error(res.desc)
        }
      })

    },
    resetAdd() {
      while (this.fileList.length !== 0) {
        this.fileList.pop();
      }
      while (this.picList.length !== 0) {
        this.picList.pop();
      }
    }
  },
  created() {
    this.form.uid = sessionStorage.getItem('uid');
    let nowDate = new Date()
    let date = {
      year: nowDate.getFullYear(),
      month: nowDate.getMonth() + 1,
      date: nowDate.getDate()
    }
    this.form.timePublish = date.year + '-' + date.month + '-' + date.date
  }
}
</script>

<style scoped>
.el-card {
  width: 900px;
  height: 640px;
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 45%;
  left: 40%;
  transform: translate(-50%, -50%);
  /*height:600px;*/
  /*max-height:calc(100% - 10px);*/
  /*max-width:calc(100% - 10px);*/
}

.el-card .el-card__body {
  flex: 1;
  overflow: auto;
}
</style>
